<template>
  <div class="code-layout">
    <div class="code-materials">
      <!-- <br /> -->
      <!-- <div class="file">
        <file-list :biz_id="id" :type="type" :is_public="true" v-if="id" />
      </div> -->
    </div>

    <div class="code-info">
      <h3 class="info-title">基本信息</h3>
      <ul class="info-item">
        <li>
          <span class="key">名称:</span>
          <span class="val">{{ detailData.name }}</span>
        </li>
        <li>
          <span class="key"> 创建人： </span>
          <span class="val">{{
            detailData.create_user && (detailData.create_user.nick_name ||
              detailData.create_user.username)
          }}</span>
        </li>
        <li>
          <span class="key">创建时间： </span>
          <span class="val">{{ detailData.create_time }}</span>
        </li>
      </ul>
      <h3 class="info-title">仿真信息 </h3>
      <ul class="info-item">
        <li>
          <span class="key">仿真名称:</span>
          <span class="val" v-if="version.simulation_node_group">{{
            version.simulation_node_group.image.name
          }}</span>
        </li>
        <li>
          <span class="key">想定名称:</span>
          <span class="val" v-if="version.scenario">{{ version.scenario.name }}</span>
        </li>
      </ul>
      <h3 class="info-title">开发环境</h3>
      <dl class="code-dl" v-for="(e, i) in version.node_group_list" :key="i">
        <ul class="info-item">
          <li>
            <span class="key">节点类型:</span>
            <span class="val">{{ nodeTypeMaps[e.type] }}</span>
          </li>
          <li>
            <span class="key">资源组:</span>
            <span class="val">{{ e.product.name }}</span>
          </li>
          <li>
            <span class="key">镜像:</span>
            <span class="val">{{ e.image.name }}</span>
          </li>
          <li>
            <span class="key">数量:</span>
            <span class="val">{{ e.pod_num }}</span>
          </li>

        </ul>
      </dl>

      <div class="code-md">
        <md-preview :biz_id="id" :type="type" :is_public="true" class="preview" v-if="id" />
      </div>
    </div>
  </div>
</template>

<script>
import { getImageDetail } from '@/api/image'


export default {
  data() {
    let typeMap = { '0': 'dataset', '1': 'workspace', '2': 'model' }

    return {
      id: null,
      versionNow: {},
      type: typeMap[this.$route.query.active],
      mainNode: null,
      slaveNodeList: [],
    };
  },
  props: ['detailData', 'version'],
  watch: {
    detailData(val) {
      console.log(val)
      this.getData()
    },
    version(val) {
      console.log(val)
      this.getData()
    }
  },

  async created() {
    this.getData()
  },
  async mounted() {
    this.$nextTick(() => {
      console.log(this.detailData)
    })
  },

  destroyed() {

  },
  methods: {
    async getData() {
      this.id = this.version.id

      this.getAddForm(this.detailData)
      this.$forceUpdate()
      console.log("version", this.version)
    },

    async getAddForm(data) {
      this.addForm = data
      this.port_list = []
      this.slaveNodeList = []
      for (let node of data.node_group_list) {
        if (node.type == 1) {
          this.mainNode = node
          let res = await getImageDetail({ id: this.mainNode.image_id })
          let mainImage = res.data
          this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id]
        } else {
          let res = await getImageDetail({ id: node.image_id })
          let slaveImage = res.data
          let slaveNode = node
          slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id]
          this.slaveNodeList.push(slaveNode)
        }
        console.log("slaveNodeList", this.slaveNodeList.length)
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>